<template>
	<view class="search">
		<icon type="search" size="12" class="search_icon" />
		<input type="text" :placeholder="placeholder" class="input_box">
	</view>
</template>

<script>
export default {
	props: {
		params: {
			type: Object,
			default: function() {
				return {}
			}
		}
	},
	data() {
		return {
			search_info: {},
			placeholder: ''
		}
	},
	mounted() {
		this.search_info = JSON.parse(JSON.stringify(this.params))
		if (this.search_info.hot_word !== undefined && this.search_info.hot_word.length > 0) {
			this.placeholder = '搜索：如：' + this.search_info.hot_word.join('、')
		} else {
			this.placeholder = '搜索'
		}
	},
	methods: {
		
	}
}
</script>

<style scoped>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}
.search{
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.6);
	/* background-color: #59f; */
	width: 100%;
	padding: 0 20upx;
	height: 56upx;
	border-radius: 28upx;
	box-sizing: border-box;
}
.search_icon{
	padding-right: 14upx;
}
.input_box{
	font-size: 24upx;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
